<template>
  <el-dialog
    :title="title"
    :visible.sync="open"
    width="780px"
    append-to-body
    :close-on-click-modal="false"
  >
    <div class="disFlx" style="justify-content: space-between">
      <div style="width: 300px">
        <el-form
          ref="printConfig"
          :model="printConfig"
          :show-message="false"
          label-width="90px"
        >
          <el-form-item label="打印模板">
            <el-select
              v-model="printConfig.type"
              placeholder="请选择打印模板"
              style="width: 100%"
            >
              <el-option label="模板1(默认)" :value="0" />
              <el-option label="模板2" :value="1" />
            </el-select>
          </el-form-item>
          <el-form-item label="打印标题">
            <el-input
              v-model="printConfig.title"
              placeholder="为空则采用系统默认标题"
              clearable
            ></el-input>
            <div class="linh-20 fz-12 color9 pt-5">
              不填写打印标题则采用系统默认生成的标题
            </div>
          </el-form-item>
        </el-form>
      </div>
      <div style="box-shadow: 0 0 10px #999; padding: 10px">
        <!-- A4纸大小, 该尺寸是在边距5mm也就是默认边距时换算出的px; -->
        <div
          class="printOrder"
          ref="printOrder"
          style="font-size: 18px; width: 794px; min-height: 1000px; zoom: 0.5"
        >
          <div v-if="printConfig.type !== 1">
            <span class="fw-7">申请单号：</span>
            ORD2024010100000000000
          </div>
          <div v-if="printConfig.type !== 1" class="tc fz-20 fw-7 py-10">
            {{ printConfig.title || "系统默认标题" }}
          </div>
          <div v-else class="py-10">
            <div class="tc fz-28 fw-7">
              {{ printConfig.title || "系统默认标题" }}
            </div>
            <div class="tc fz-20 fw-7 pt-10">处方笺（中药颗粒）</div>
          </div>

          <div class="py-10" style="border-bottom: solid 1px #cfcfcf">
            <span class="pr-50">
              <span class="fw-7">处方号：</span>
              <span>PRE2024010100000000000</span>
            </span>
            <span class="pl-50">
              <span class="fw-7">开方时间：</span>2024-01-01 00:00:00
            </span>
          </div>
          <div class="py-10">
            <div class="disFlxJS py-5">
              <div class="shrink0">
                <span class="fw-7">姓名：</span>
                <span>张三</span>
              </div>
              <div class="px-10 shrink0">
                <span class="fw-7">性别：</span>
                <span>男</span>
              </div>
              <div class="px-10 shrink0">
                <span class="fw-7">年龄：</span>
                <span>20 岁</span>
              </div>
              <div class="shrink0">
                <span class="fw-7">电话：</span>
                <span>12222222222</span>
              </div>
            </div>
            <div class="disFlx py-5">
              <div class="fw-7 shrink0">
                {{ printConfig.type !== 1 ? "收货信息" : "家庭住址" }}：
              </div>
              <div>
                <span>李四</span>
                <span class="pl-30">12222222222</span>
                <span class="pl-30">广东省深圳市南山区粤海街道科苑北路8号</span>
              </div>
            </div>
            <div class="disFlx py-5">
              <div class="pr-35 shrink0">
                <span class="fw-7">药品类型：</span>
                <span>药品类</span>
                <span>(中药颗粒)</span>
              </div>
              <div class="pl-35 disFlx">
                <span class="fw-7 shrink0">诊断证型：</span>
                <span>感冒发烧</span>
              </div>
            </div>
          </div>
          <div
            class="prescription"
            :style="
              printConfig.type === 1
                ? 'border-left: none;border-right: none;padding: 15px 0 0 0;'
                : 'padding: 15px 15px 0 15px;'
            "
          >
            <div>RP: （共2味）：</div>
            <div class="printGrid">
              <div>
                <div class="fw-7">绞股蓝</div>
                <div class="py-5">10g</div>
              </div>
              <div>
                <div class="fw-7">金银花</div>
                <div class="py-5">10g</div>
              </div>
            </div>
            <div v-if="printConfig.type !== 1" style="flex: 1"></div>
            <div class="py-5">
              <span class="fw-7">用法用量：</span>
              <span class="px-2">口服</span>
              <span class="px-2">每日3次,每次1袋/格,</span>
              <span>共<span class="fw-6 colorY">3</span>剂</span>
            </div>
            <div v-if="printConfig.type !== 1" class="py-5">
              <span class="fw-7">医嘱：</span>
              <span>禁忌：忌生冷；忌油腻；忌辛辣</span>
            </div>
            <div
              v-if="printConfig.type !== 1"
              class="pt-10 shrink0 disFlxAC flexEnd"
            >
              <span class="pr-5">开方医生：</span>
              <img src="" style="width: 100px; height: auto" />
            </div>
            <div
              v-else
              style="flex: 1; text-align: center; padding: 10px 0 20px 0"
            >
              -------------- 以下空白 --------------
            </div>
            <div v-if="printConfig.type === 1" class="bomTips">
              <div class="pr-30">大额处方意见：</div>
              <div>同意</div>
              <div class="checkedBox"></div>
              <div class="pl-10">签名：</div>
              <div style="min-width: 120px"></div>
            </div>
            <div :style="printConfig.type !== 1 ? 'margin-bottom: 5%;' : 'margin-bottom: 8%;'"></div>
          </div>
          <div v-if="printConfig.type !== 1" class="py-10 disFlx">
            <div class="fw-7 shrink0">温馨提示：</div>
            <div>
              <!-- , '本处方3日内有效' -->
              <span
                v-for="(tip, tipIndex) in [
                  '请遵医嘱用药',
                  '请将药品放阴凉干燥处保存',
                ]"
                :key="tipIndex"
                :class="{ 'pl-15': tipIndex !== 0 }"
                >{{ tipIndex + 1 + "、" + tip }}</span
              >
            </div>
          </div>
          <div v-else>
            <div class="disFlxJS py-20">
              <div class="shrink0 pr-50">
                <span class="fw-7 fz-16">医生：</span>
              </div>
              <div class="shrink0 pr-50">
                <span class="fw-7 fz-16">审核：</span>
              </div>
              <div class="shrink0 pr-50">
                <span class="fw-7 fz-16">煎煮：</span>
              </div>
              <div class="shrink0 pr-50">
                <span class="fw-7 fz-16">调配：</span>
              </div>
              <div class="shrink0 pr-50">
                <span class="fw-7 fz-16">核发：</span>
              </div>
            </div>
            <div>
              除主诊医师特别注明外，处方仅当日有效。按卫生部规定，药房药品一经发出，不得退换。
            </div>
            <div class="pt-5">打印时间：</div>
          </div>
        </div>
      </div>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm">保存并应用</el-button>
      <el-button @click="open = false">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      title: "打印设置",
      open: false,
      printConfig: {},
    };
  },
  methods: {
    openModal() {
      const printConfig = localStorage.getItem("printConfig");
      if (printConfig) {
        this.printConfig = JSON.parse(printConfig);
      } else {
        this.printConfig = {
          type: 0,
          title: "",
        };
      }

      this.open = true;
    },
    submitForm() {
      localStorage.setItem("printConfig", JSON.stringify(this.printConfig));
      this.$message.success("保存并应用成功");
      this.open = false;
    },
  },
};
</script>

<style lang="scss" scoped></style>
